<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>task08 响应式网格（栅格化）布局</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    .row:before,
    .row:after {
        content: "";
        clear: both;
    }
    
    .col-md-4,
    .col-md-3,
    .col-md-6,
    .col-md-1,
    .col-md-2 {
        box-sizing: border-box;
        float: left;
        padding: 10px;
    }
    
    .col-md-1 {
        width: 8.33333333333333%;
    }
    
    .col-md-2 {
        width: 16.66666666666667%;
    }
    
    .col-md-4 {
        width: 33.333333333333%;
    }
    
    .col-md-3 {
        width: 25%;
    }
    
    .col-md-6 {
        width: 50%;
    }
    
    [class*="contnt-"] {
        border: #999 1px solid;
        background-color: #eee;
        height: 50px;
        padding: 10px;
        box-sizing: border-box;
    }
    
    @media screen and (max-width: 768px) {
        .col-xs-6 {
            width: 50%;
        }
        .col-xs-12 {
            width: 100%;
        }
        .col-xs-3 {
            width: 25%;
        }
        .col-xs-6 {
            width: 50%;
        }
        .col-xs-2 {
            width: 16.66666666666667%;
        }
        .col-xs-8 {
            width: 66.66666666666667%;
        }
    }
    </style>
</head>

<body>
    <div class="row">
        <div class="col-md-4 col-xs-6">
            <div class="contnt-first"></div>
        </div>
        <div class="col-md-4 col-xs-6">
            <div class="contnt-first"></div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="contnt-first"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 col-xs-3">
            <div class="contnt-second"></div>
        </div>
        <div class="col-md-6 col-xs-6">
            <div class="contnt-second"></div>
        </div>
        <div class="col-md-3 col-xs-3">
            <div class="contnt-second"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-xs-2">
            <div class="contnt-third"></div>
        </div>
        <div class="col-md-1 col-xs-2">
            <div class="contnt-third"></div>
        </div>
        <div class="col-md-2 col-xs-8">
            <div class="contnt-third"></div>
        </div>
        <div class="col-md-2 col-xs-3">
            <div class="contnt-third"></div>
        </div>
        <div class="col-md-6 col-xs-3">
            <div class="contnt-third"></div>
        </div>
    </div>
</body>

</html>
